<template>
  <div class="content">
    <a-card style="padding: 30px" class="agent-info">
      <div class="title">
        <b>代理商信息</b>
      </div>

      <div class="item">
        <span class="label">代理商名称</span>
        <span class="desc">{{ vdata.agentInfo.agentName }}</span>
      </div>
      <div class="item">
        <span class="label">代理商简称</span>
        <span class="desc">{{ vdata.agentInfo.agentShortName }}</span>
      </div>
      <div class="item">
        <span class="label">登录名</span>
        <span class="desc">{{ vdata.agentInfo.loginUsername }}</span>
      </div>
      <div class="item">
        <span class="label">代理商号</span>
        <span class="desc">{{ vdata.agentInfo.agentNo }}</span>
      </div>
      <div class="item">
        <span class="label">服务商号</span>
        <span class="desc">{{ vdata.agentInfo.isvNo }}</span>
      </div>
      <div class="item">
        <span class="label">上级代理商号</span>
        <span class="desc">{{ vdata.agentInfo.pid }}</span>
      </div>
      <div class="item">
        <span class="label">是否允许发展下级代理</span>
        <span class="desc">{{
          vdata.agentInfo.addAgentFlag == 1 ? '是' : '否'
        }}</span>
      </div>
      <div class="item">
        <span class="label">注册时间</span>
        <span class="desc">{{ vdata.agentInfo.createdAt }}</span>
      </div>
    </a-card>

    <a-card class="statistics-box order-statistics order">
      <div class="box-flex">
        <div class="title">
          <b style="flex-grow: 1">订单/商户统计</b>
          <a-select
            v-model:value="vdata.orderStatic"
            placeholder="订单统计"
            style="width: 215px; margin-right: 10px"
            @change="staticChange"
          >
            <a-select-option value="1"> 仅统计自己 </a-select-option>
            <a-select-option value="2"> 全部代理商 </a-select-option>
            <a-select-option
              v-for="(item, index) in (vdata.agentList as any)"
              :key="index"
              :value="item.agentNo"
            >
              {{ item.agentName }}
            </a-select-option>
          </a-select>
          <JeepayDateRangePicker
            v-model:value="orderDate"
            class="date"
            customDateRangeType="date"
            :allTimeIsShow="false"
            @update:value="getStatisticsData('order')"
          />
        </div>

        <div class="other-item" style="margin: 30px 0">
          <div class="item">
            <p class="item-title">成交金额（元）</p>
            <p class="item-text" style="color: #1890ff !important">
              {{ (vdata.payAmount / 100).toFixed(2) }}
            </p>
          </div>
          <div class="item">
            <p class="item-title">交易笔数（笔）</p>
            <p class="item-text">{{ vdata.payCount }}</p>
          </div>
          <div class="item">
            <p class="item-title">退款金额（元）</p>
            <p class="item-text">{{ (vdata.refundAmount / 100).toFixed(2) }}</p>
          </div>
          <div class="item">
            <p class="item-title">退款笔数（笔）</p>
            <p class="item-text">{{ vdata.refundCount }}</p>
          </div>
          <!-- <div class="item">
          <p class="item-title">利润（元）</p>
          <p class="item-text">{{ vdata.profit }}</p>
        </div> -->
        </div>
        <div class="other-item">
          <div class="item">
            <p class="item-title">商户总数</p>
            <p class="item-text" style="color: #1890ff !important">
              {{ vdata.mchAllCount }}
            </p>
          </div>
          <div class="item">
            <p class="item-title">新增商户数</p>
            <p class="item-text">{{ vdata.mchTodayAddCount }}</p>
          </div>
          <div class="item">
            <p class="item-title">入网商户数</p>
            <p class="item-text">{{ vdata.mchOnNetCount }}</p>
          </div>
          <div class="item">
            <p class="item-title">新增入网商户</p>
            <p class="item-text">{{ vdata.mchOnNetNewCount }}</p>
          </div>
          <!-- <div class="item">
          <p class="item-title">入网失败商户</p>
          <p class="item-text">{{ vdata.mchOnNetFailCount }}</p>
        </div> -->
        </div>
      </div>
    </a-card>
    <!-- <a-card class="statistics-box order-statistics">
      <div class="title">
        <b>商户统计</b>
        <a-select v-model:value="vdata.mchStatic" placeholder="商户统计" style="width: 200px" @change="staticChange('mch')">
          <a-select-option value="1">
            仅统计自己
          </a-select-option>
          <a-select-option value="2">
            全部
          </a-select-option>
          <a-select-option v-for="(item, index) in (vdata.agentList as any)" :key="index" :value="item.agentNo">
            {{ item.agentName }}
          </a-select-option>
        </a-select>
        <JeepayDateRangePicker v-model:value="mchDate" class="date" customDateRangeType="date" :allTimeIsShow="false" @update:value="getStatisticsData('merchant')" />
      </div>
    </a-card> -->
    <a-card
      v-if="vdata.agentInfo.addAgentFlag == 1"
      class="statistics-box agent"
    >
      <div class="agent-statistics">
        <div class="title">
          <b>代理商统计</b>
          <!-- <JeepayDateRangePicker
            v-model:value="agentDate"
            class="date"
            customDateRangeType="date"
            :allTimeIsShow="false"
            @update:value="getStatisticsData('agent')"
          /> -->
        </div>
        <div class="main-item">
          <p class="item-title">代理商总数</p>
          <p class="item-text">{{ vdata.agentAllCount }}</p>
        </div>
        <div class="other-item">
          <div class="item">
            <p class="item-title">新增代理商数</p>
            <p class="item-text">{{ vdata.agentNewCount }}</p>
          </div>
          <div class="item">
            <p class="item-title">活动代理商数</p>
            <p class="item-text">{{ vdata.agentOnCount }}</p>
          </div>
        </div>
      </div>
    </a-card>
    <a-card class="statistics-box hardware-statistics hardware">
      <div class="title">
        <b>硬件统计</b>
      </div>
      <div class="other-item hardware-item">
        <div class="item">
          <p class="item-title">码牌总数</p>
          <p class="item-text item-text-top">{{ vdata.qrCodeCardAllCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">云喇叭总数</p>
          <p class="item-text item-text-top">{{ vdata.speakerAllCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">云打印总数</p>
          <p class="item-text item-text-top">{{ vdata.printerAllCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">POS机总数</p>
          <p class="item-text item-text-top">{{ vdata.posAllCount }}</p>
        </div>
      </div>
      <div class="other-item hardware-item">
        <div class="item">
          <p class="item-title">空码数量</p>
          <p class="item-text">{{ vdata.qrCodeCardUnCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">未绑定云喇叭数</p>
          <p class="item-text">{{ vdata.speakerUnCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">未绑定云打印数</p>
          <p class="item-text">{{ vdata.printerUnCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">未绑定POS机数</p>
          <p class="item-text">{{ vdata.posUnCount }}</p>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import {
  $getStatistics,
  API_URL_AGENT_LIST,
  req,
  $getMainUserInfo
} from '@/api/manage'
const vdata: any = reactive({
  payAmount: 0, //成交金额
  payCount: 0, //交易笔数
  refundAmount: 0, //退款金额
  refundCount: 0, //退款笔数
  profit: 0, //利润

  mchAllCount: 0, // 商户总数
  mchTodayAddCount: 0, // 新增商户数
  mchOnNetCount: 0, //入网商户数
  mchOnNetNewCount: 0, // 新增商户入网数量
  mchOnNetFailCount: 0, //入网失败商户数

  agentAllCount: 0, // 代理商总数
  agentNewCount: 0, //新增代理商数
  agentOnCount: 0, //活动代理商数

  orderTodayCount: 0, // 今日订单数量
  orderTodaySum: 0, // 今日订单金额

  qrCodeCardAllCount: 0, // 码牌总数
  speakerAllCount: 0, //云喇叭总数
  printerAllCount: 0, //云打印总数
  posAllCount: 0, //POS机总数
  qrCodeCardUnCount: 0, //空码数量
  speakerUnCount: 0, //未绑定云喇叭数
  printerUnCount: 0, //未绑定云打印数
  posUnCount: 0, //未绑定POS机数

  qrCodeCardBindCount: 0, // 已绑定码牌
  qrCodeCardUnBindCount: 0, // 剩余未绑定码牌

  // 用于下拉框筛选
  orderStatic: '2', // 订单统计(商户统计)
  countType: '2', // 自己全部或者子代理
  agentNo: '', // 商户号
  agentList: [], // 代理商列表

  // 代理商信息
  agentInfo: {} as any
})
let statisticsDate = ref('today') // 公共日期
let agentDate = ref('today') // 代理商日期
let mchDate = ref('today') // 商户日期
let orderDate = ref('today') // 订单日期

// 获取代理商列表
const getAgentList = () => {
  req.list(API_URL_AGENT_LIST, vdata.searchData).then((bizData) => {
    vdata.agentList = bizData.records
  })
}
onMounted(() => {
  getAgentList()
})

// 获取代理商信息
$getMainUserInfo().then((res) => {
  vdata.agentInfo = res
  console.log(vdata.agentInfo)
})

// 订单统计切换代理商
const staticChange = (e) => {
  // countType 统计数据类型 1-代理商本身数据 2-全部 3-代理商号搜索 agentNo 3类型时必传
  let no = e ? e : ''
  if (['1', '2'].includes(no)) {
    vdata.countType = no
    vdata.agentNo = ''
  } else {
    vdata.countType = 3
    vdata.agentNo = no
  }

  $getStatistics(statisticsDate.value, vdata.countType, vdata.agentNo).then(
    (bizData) => {
      const { payAmount, payCount, refundAmount, refundCount } =
        bizData.orderCount
      vdata.payAmount = payAmount
      vdata.payCount = payCount
      vdata.refundAmount = refundAmount
      vdata.refundCount = refundCount

      const {
        mchAllCount,
        mchTodayAddCount,
        mchOnNetCount,
        mchOnNetNewCount,
        mchOnNetFailCount
      } = bizData.mchCount
      vdata.mchAllCount = mchAllCount
      vdata.mchTodayAddCount = mchTodayAddCount
      vdata.mchOnNetCount = mchOnNetCount
      vdata.mchOnNetNewCount = mchOnNetNewCount
      vdata.mchOnNetFailCount = mchOnNetFailCount
     
      const {
        agentAllCount,
        agentNewCount,
        agentOnCount
      } = bizData.agentCount
      vdata.agentAllCount = agentAllCount
      vdata.agentNewCount = agentNewCount
      vdata.agentOnCount = agentOnCount
    }
  )
}

// 获取统计数据
function getStatisticsData(sign) {
  if (sign === 'order') {
    // statisticsDate.value = mchDate.value

    statisticsDate.value = orderDate.value
  }
  $getStatistics(statisticsDate.value, vdata.countType, vdata.agentNo)
    .then((res) => {
      if (sign === 'order') {
        vdata.agentAllCount = res.agentCount.agentAllCount
        vdata.agentNewCount = res.agentCount.agentNewCount
        vdata.agentOnCount = res.agentCount.agentOnCount
        
        vdata.mchAllCount = res.mchCount.mchAllCount
        vdata.mchOnNetNewCount = res.mchCount.mchOnNetNewCount
        vdata.mchTodayAddCount = res.mchCount.mchTodayAddCount
        vdata.mchOnNetCount = res.mchCount.mchOnNetCount
        vdata.mchOnNetFailCount = res.mchCount.mchOnNetFailCount

        vdata.payAmount = res.orderCount.payAmount
        vdata.payCount = res.orderCount.payCount
        vdata.refundAmount = res.orderCount.refundAmount
        vdata.refundCount = res.orderCount.refundCount
        vdata.profit = res.payProfit
      } else {
        // 代理商
        vdata.agentAllCount = res.agentCount.agentAllCount
        vdata.agentNewCount = res.agentCount.agentNewCount
        vdata.agentOnCount = res.agentCount.agentOnCount
        // 商户
        vdata.mchAllCount = res.mchCount.mchAllCount
        vdata.mchOnNetCount = res.mchCount.mchOnNetCount
        vdata.mchTodayAddCount = res.mchCount.mchTodayAddCount
        vdata.mchOnNetNewCount = res.mchCount.mchOnNetNewCount
        vdata.mchOnNetFailCount = res.mchCount.mchOnNetFailCount
        // 订单
        vdata.payAmount = res.orderCount.payAmount
        vdata.payCount = res.orderCount.payCount
        vdata.refundAmount = res.orderCount.refundAmount
        vdata.refundCount = res.orderCount.refundCount
        vdata.profit = res.payProfit

        // 码牌
        vdata.qrCodeCardAllCount = res.qrCodeCardAllCount
        vdata.speakerAllCount = res.speakerAllCount
        vdata.printerAllCount = res.printerAllCount
        vdata.posAllCount = res.posAllCount
        vdata.qrCodeCardUnCount = res.qrCodeCardUnBindCount
        vdata.speakerUnCount = res.speakerUnCount
        vdata.printerUnCount = res.printerUnCount
        vdata.posUnCount = res.posUnCount
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

Promise.all([
  $getStatistics(statisticsDate.value, vdata.countType, vdata.agentNo)
])
  .then((res) => {
    getStatisticsData('')
  })
  .catch((error) => {})
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.statistics-box {
  box-sizing: border-box;
  padding: 30px;
  margin-bottom: 30px;

  .main-item,
  .other-item {
    width: 100%;
    .item {
      width: 25%;
    }
    p {
      margin: 0 !important;
    }
    .item-title {
      white-space: nowrap;
      font-weight: 400;
      font-size: 13px;
      letter-spacing: 0.05em;
      color: rgba(0, 0, 0, 0.6);
    }
    .item-text {
      font-weight: 400;
      font-size: 50px;
      letter-spacing: 0.05em;
      color: var(--ant-primary-color);
    }
  }
  .other-item {
    display: flex;
    .item-text {
      font-weight: 400;
      font-size: 25px;
      letter-spacing: 0.05em;
      color: #000 !important;
    }
  }
}

.hardware-statistics {
  .hardware-item {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 25%;
    }
    .item-text-top {
      margin-bottom: 30px !important;
      font-weight: 400;
      font-size: 37px;
    }
  }
}
/deep/ .ant-card-body {
  height: 100%;
}
.box-flex {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  align-content: space-between;
  & > div {
    width: 100%;
  }
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  b {
    font-size: 14px;
    font-weight: 600;
    margin-right: 10px;
  }
  .date {
    width: 215px;
  }
}
.agent-info {
  margin-bottom: 30px;
  .desc {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: #262626;
  }
  .label {
    font-weight: 500;
    font-size: 14px;
    color: #999;
    margin-right: 10px;
  }
  .item {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    &:nth-last-child(1) {
      padding: 0;
    }
  }
}
.agent-statistics {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  align-content: space-between;
  & > div {
    width: 100%;
  }
}

// 响应式部分
.agent-info,
.order,
.agent,
.hardware {
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .agent-info {
    order: 1;
    width: 280px;
    flex-grow: 1;
  }
  .agent {
    order: 0;
    width: 260px;
    flex-grow: 1;
    margin-right: 30px;
  }
  .order,
  .hardware {
    order: 3;
    width: 100%;
  }
}

@media screen and (min-width: 1430px) {
  .agent,
  .agent-info {
    width: 350px;
    margin-right: 30px;
  }
  .order,
  .hardware {
    width: 65%;
    flex-grow: 1;
  }

  .agent-info {
    order: 0;
  }
  .order {
    order: 1;
  }
  .agent {
    order: 2;
  }
  .hardware {
    order: 3;
  }
}
</style>
